<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>Cors Test</title>
</head>

<body>
    <input type="text" id="url_prefix" value="https://swgen2-dev.successwareg2.com/api/spike" style="width:400px">
    <input type="button" id="about" value="about" onclick="getAbout()" />
    <form enctype="multipart/form-data">
        <input name="file" type="file" />
        <input type="button" id="form" value="Upload" />
    </form>
    <progress></progress>
    <script>

        function getAbout() {
            var basePrefix = $("#url_prefix").val();
            $.get(basePrefix + "/about",
                function (data) {
                    alert("Data Loaded: " + data);
                });
        }
        $(':file').on('change', function () {
            var file = this.files[0];

            if (file.size > 1024) {
                console.log('max upload size is 1k');
            }
        });

        $('#form').on('click', function () {
            var basePrefix = $("#url_prefix").val();
            $.ajax({
                // Your server script to process the upload
                url: basePrefix + '/media/upload',
                type: 'POST',

                // Form data
                data: new FormData($('form')[0]),

                // Tell jQuery not to process data or worry about content-type
                // You *must* include these options!
                cache: false,
                contentType: false,
                processData: false,

                // Custom XMLHttpRequest
                xhr: function () {
                    var myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        // For handling the progress of the upload
                        myXhr.upload.addEventListener('progress', function (e) {
                            if (e.lengthComputable) {
                                $('progress').attr({
                                    value: e.loaded,
                                    max: e.total,
                                });
                                alert("ok");
                            }
                        }, false);
                    }
                    return myXhr;
                }
            });
        });
    </script>
</body>

</html>